<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单标记</title>
</head>
<body>
    <!-- form表单 method属性如果没有设置的话,默认也许是get请求,另外还有post请求 - servlet技术
         action指向的是后台的程序的url路径

         input的name属性的作用 - 后台代码希望获取表单中的某个空间的数据[value]
         那么就是通过name属性来获取的,可能是单个值,也有可能是数组
    
    -->
    <form method="GET" action="http://www.baidu.com">
        <!-- 普通文本框 
             repuired - 在提交表单的时候,该文本框不能为空,如果为空,则提交失败
             maxlength - 文本框中输入的内容的长度
        -->
        <!-- <input type="text" placeholder="请您输入用户名!" required maxlength="8"><br> -->

        <!-- 如果希望patter是有效的,那么一定要配合required一起使用,才能使用正则进行验证 -->

        <!-- 验证的位置 - 前端验证和后端验证
                         前端验证是可以绕过去的 - 不安全的
                         前端验证主要是为了减轻后端服务器的压力
        -->
        <input type="text" placeholder="用户名首字母小写,其余随便,6-8" required pattern="[a-z][a-zA-Z0-9_]{5,7}"><br>
        <!-- 密码框 -->
        <input type="password"><br>

        <!-- 日期框 - 不建议使用 - 浏览器兼容性不好
             实际使用 - 寻找日期插件 - bootstrap
        -->
        <input type="data"><br>

        <input type="range"><br>

        <input type="number" value="10" min="5" max="15" step="2"><br>

        <!-- 单选按钮 - 必须是同一组 - 设置相同的name属性 -->
        <input type="radio" name="gender" value="M">男<input type="radio" name="gender" checked>女<br>

        <!-- 复选框 -->
        <input type="checkbox" name="">打瞌睡1
        <input type="checkbox" name="">打瞌睡2
        <input type="checkbox" name="">打瞌睡3
        <br>

        <!-- 下拉列表 -->
        <select>
            <option>=请您选择=</option>
            <option value="1">本科</option>
            <option value="2">硕士</option>
            <option value="3">博士</option>
        </select>
        <br>

        <!-- 文本域 
             项目中 - 评论 - 发帖
             插件 - 1 - 百度富文本编辑器
                    2 - ckeditor插件
        -->
        <textarea cols="15" rows="6"></textarea>

        <!-- 只读框 -->
        <input type="text" value="12356" readonly><br>

        <!-- 隐藏域 - 相当重要 -->
        <input type="hidden" value="1"><br>

        <!-- 表单按钮的几种形式 -->
        <!-- 1 - 提交按钮 -->
        <input type="submit" value="提交">
        <!-- 2 - 重置按钮 -->
        <input type="reset" value="重置">

        


    </form>


    
</body>
</html>